<template>
    <el-card shadow="never" class="message">
        <div class="main-content">
            <el-scrollbar min-height="600px">
                <div class="title">
                    <span class="head">会话存档</span>
                    <a
                        v-auth="'SETTING_INFORMATION'"
                        :href="`/message-guide?ip=${config_ip}`"
                        target="_blank"
                        class="guide-box"
                        >（配置引导）</a
                    >
                </div>

                <div v-show="infoData.customer.is_open !== 1" class="content">
                    <img src="@/assets/noData.png" />
                    <div class="tips">
                        <div class="open">您还没有开启信息存档功能</div>
                        <el-button v-auth="'CONCAT_OPEN'" type="primary" @click="code = true">联系客服开启</el-button>
                    </div>
                </div>
                <div v-show="infoData.customer.is_open == 1" class="detail">
                    <div class="main">
                        <el-form label-position="right" label-width="130px" :model="infoData">
                            <el-form-item label="可信IP地址：">
                                <el-row>
                                    <!-- JSON.parse(infoData.customer.trusted_ip).join()  -->
                                    <el-col :span="3">{{ JSON.parse(infoData.customer.trusted_ip).join() }}</el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="加密公钥内容：">
                                <el-row :gutter="20">
                                    <el-col :span="20" class="space"
                                        ><el-input v-model="infoData.customer.pubkey" disabled
                                    /></el-col>
                                    <el-col :span="4"
                                        ><el-button
                                            v-if="infoData.customer.pubkey"
                                            @click="Copy(infoData.customer.pubkey)"
                                            >复制</el-button
                                        ></el-col
                                    >
                                </el-row>
                            </el-form-item>
                            <el-form-item label="加密私钥内容：">
                                <el-row :gutter="20">
                                    <el-col :span="20" class="space"
                                        ><el-input v-model="infoData.customer.prikey" disabled
                                    /></el-col>
                                    <el-col :span="4"
                                        ><el-button
                                            v-if="infoData.customer.prikey"
                                            @click="Copy(infoData.customer.prikey)"
                                            >复制</el-button
                                        ></el-col
                                    >
                                </el-row>
                            </el-form-item>
                            <el-form-item label="URL：">
                                <el-row :gutter="20">
                                    <el-col :span="20" class="space"
                                        ><el-input v-model="infoData.customer.url" disabled
                                    /></el-col>
                                    <el-col :span="4"
                                        ><el-button v-if="infoData.customer.url" @click="Copy(infoData.customer.url)"
                                            >复制</el-button
                                        ></el-col
                                    >
                                </el-row>
                            </el-form-item>
                            <el-form-item label="ToKen：">
                                <el-row :gutter="20">
                                    <el-col :span="20" class="space"
                                        ><el-input v-model="infoData.customer.token" disabled
                                    /></el-col>
                                    <el-col :span="4"
                                        ><el-button
                                            v-if="infoData.customer.token"
                                            @click="Copy(infoData.customer.token)"
                                            >复制</el-button
                                        ></el-col
                                    >
                                </el-row>
                            </el-form-item>
                            <el-form-item label="EncodingAESKey：">
                                <el-row :gutter="20">
                                    <el-col :span="20" class="space"
                                        ><el-input v-model="infoData.customer.encoding_aes_key" disabled
                                    /></el-col>
                                    <el-col :span="4"
                                        ><el-button
                                            v-if="infoData.customer.encoding_aes_key"
                                            @click="Copy(infoData.customer.encoding_aes_key)"
                                            >复制</el-button
                                        ></el-col
                                    >
                                </el-row>
                            </el-form-item>
                            <el-form-item label="私钥文件：">
                                <el-row>
                                    <el-col :span="3" class="download"
                                        ><el-button v-auth="'DOWNLOAD'" @click="down(0)">下载</el-button></el-col
                                    >
                                </el-row>
                            </el-form-item>
                            <el-form-item label="公钥文件：">
                                <el-row>
                                    <el-col :span="3" class="download"
                                        ><el-button v-auth="'COPY'" @click="down(1)">下载</el-button></el-col
                                    >
                                </el-row>
                            </el-form-item>
                            <el-form-item label="会话存档Secret：">
                                <el-row
                                    ><el-col :span="8"><el-input v-model.trim="infoData.customer.secret" /></el-col
                                ></el-row>
                            </el-form-item>
                            <el-form-item label="公钥版本号：">
                                <el-row
                                    ><el-col :span="8"
                                        ><el-input v-model.trim="infoData.customer.pubkey_version" /></el-col
                                ></el-row>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <div v-show="infoData.customer.is_open == 1" class="btn">
            <el-button @click="reset">重置</el-button>
            <el-button v-auth="'SAVE'" type="primary" @click="save">保存</el-button>
        </div>
        <div v-show="code" class="dialog">
            <div class="code">
                <img src="@/assets/image/customer/Shape.png" class="delete" @click="code = false" />
                <span class="qw">企微专属顾问</span>
                <img src="https://static.scrm.keyid.cn/assets/images/global/service.png" class="img" />
                <span class="mess">扫描二维码，开通消息存档</span>
            </div>
        </div>
    </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getMessage, messageSave, download } from '@/api/channelconfig/messagesave';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import router from '@/router';
const code = ref(false);
const { toClipboard } = useClipboard();
const config_ip = ref('');
const infoData = reactive({
    customer: {
        encoding_aes_key: '',
        secret: '',
        is_open: 0,
        trusted_ip: '[]',
        pubkey: '',
        prikey: '',
        pubkey_version: '',
        token: ''
    }
});
const onload = () => {
    getMessage({}).then((res: any) => {
        Object.assign(infoData.customer, res);
        config_ip.value = res.config_ip;
    });
};
onMounted(() => {
    onload();
});

const save = () => {
    const param = {
        pubkey_version: infoData.customer.pubkey_version,
        secret: infoData.customer.secret
    };
    messageSave(param).then((res: any) => {
        ElMessage.success('保存成功');
    });
};

//复制语句
const Copy = async (val: any) => {
    try {
        await toClipboard(val);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};
const down = (data: any) => {
    download().then((res: any) => {
        const param = data == 0 ? res.prikey : res.pubkey;
        const blob = new Blob([param], {
            type: 'application/msword' // 下载的是doc格式的文件
        });
        const objectUrl = URL.createObjectURL(blob);
        const box = document.querySelectorAll('.download')[data];
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = objectUrl;
        box.appendChild(a);
        a.click();
        box.removeChild(a);
    });
};
const reset = () => {
    infoData.customer.pubkey_version = '';
    infoData.customer.secret = '';
};
</script>
<style lang="scss" scoped>
.message {
    height: 100%;
    position: relative;
    background: #ffff;
    padding: 25px 30px;
    box-sizing: border-box;

    .main-content {
        height: calc(100vh - 320px);
    }

    .detail {
        margin-top: 30px;

        // .main {
        //   height: calc(100vh - 320px);
        //   border-bottom: 1px solid rgba(187, 187, 187, 100);
        // }
    }

    .dialog {
        width: 236px;
        height: 236px;
        position: absolute;
        left: 150px;
        bottom: 40px;
        background: #ffff;
        padding: 18px 0;
        box-shadow: 0 12px 48px 16px rgb(0 0 0 / 3%), 0 9px 28px 0 rgb(0 0 0 / 5%), 0 6px 16px -8px rgb(0 0 0 / 8%);
        border-radius: 10px;

        .code {
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;

            .img {
                width: 210px;
                height: 210px;
            }

            .delete {
                position: absolute;
                right: 8px;
                top: -9px;
            }

            .qw {
                font-size: 16px;
                font-weight: 300;
            }

            .mess {
                font-size: 14px;
                color: #969696;
            }
        }
    }

    .title {
        height: 30px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgb(187 187 187 / 10000%);
        font-size: 14px;

        span {
            margin: 0 5px;
        }

        .guide-box {
            color: #ff6b00;
            font-size: 14px;
            text-decoration: none;
        }
    }

    .content {
        height: calc(100vh - 205px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .tips {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .open {
                font-size: 15px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #969696;
            }

            div {
                margin-bottom: 14px;
                color: rgb(227 227 227 / 10000%);
            }
        }
    }
}

.btn {
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid #d9d9d9;
}
</style>
